<template>
  <div class="wutong-pool">
    <div class="header-ban">
      <img class="banner1" src="@/assets/images/banner.png" alt="">
      <div class="box">
        <van-tabs v-model:active="active">
            <van-tab title="单位分布">
                <company-distribution />
            </van-tab>
            <van-tab title="人才信息">
                <talent-distribution />
            </van-tab>
            <van-tab title="项目信息">
              <project-distribution />
            </van-tab>
        </van-tabs>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, toRefs, onMounted } from 'vue';
import { getTalentStatistics,getUserInfo,getTalentEduChart,getTalentTitleChart } from '@/api/company';
import { useRouter,useRoute } from 'vue-router';

const active = ref(0);
const route = useRoute();

var statusActive = route.query.status || '';

if(statusActive == 0){
  active.value = 0
}else if(statusActive == 1){
  active.value = 1
} else if(statusActive == 2){
  active.value = 2
}

// const talentData = ref({})
// async function getDetail() {
//   const id = '91321200MACTU4PJ4N';
//   const { code, data } = await getTalentStatistics(id);
//   if(code === 200) {
//     talentData.value = data
//   }
// }



// const chartsbtData = ref([
//   {
//     name1:'时间',
//     name2: '人数（人）',
//     name3: '占比'
//   },
//   {
//     name1:'30天内',
//     name2: '58',
//     name3: '40%'
//   },
//   {
//     name1:'30-60天',
//     name2: '25',
//     name3: '25%'
//   },
//   {
//     name1:'60-90天',
//     name2: '15',
//     name3: '15%'
//   },
//   {
//     name1:'90-180天',
//     name2: '10',
//     name3: '10%'
//   },
//   {
//     name1:'一年以上',
//     name2: '5',
//     name3: '5%'
//   },
// ])

onMounted(() => {
  // getDetail()
  // getCurrentUser()
})

const router = new useRouter();

//  页面跳转
const jump = (options) => {
  router.push(options);
}


</script>

<style lang="scss" scoped>
.wutong-pool {
  box-sizing: border-box;
  min-height: 100vh;
  background: #E8F2FB;
  //height: 96rem;

  .header-ban{
    position: relative;

    .banner1{
      width: 100vw;
      height: 13rem;
    }

    .box{
      position: absolute;
      width: 100%;
      top: 0;
    }

    .banner2{
      position: absolute;
      right: 1rem;
      top: 0.5rem;
      width: 12.3rem;
    }
    .title1{
        position: absolute;
        top: 1.5rem;
        left: 1.9rem;
        font-size: 2rem;
        font-weight: 700;
        color: #4252FF;
    }
    .title2{
        position: absolute;
        top: 4.3rem;
        left: 1.9rem;
        font-size: 1.4rem;
        font-weight: 400;
        color: #076DFF;
    }
  }
  .bg-box{
    width: 100%;
    height: 90rem;
    position: relative;

    .bg{
      width: 100%;
      height: 162rem;
    }
  
    .card-box{
      width: 94%;
      border-radius: 5px;
      background: #FFFFFF;
      position: absolute;
      top: -10rem;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      left: 3%;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);

      .tips{
        font-size: 1.8rem;
        font-weight: 700;
      }
      .dv1{
        font-size: 1.4rem;
        font-weight: 400;
        color: #333333;
        display: flex;
        align-items: center;
        margin-top: 2rem;

        .img1{
          width: 16px;
          height: 16px;
          margin-right: 1rem;
        }
      }
      .dv2{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 0.9rem;
        padding: 2rem;
        border-radius: 0.4rem;
        background: #FFF7F1;

        .menu-item{
          text-align: left;
        }
        .ygzs{
          color: #666666;
          font-size: 1.2rem;
          font-weight: 400;
        }
        .ygnum{
          color: #121212;
          font-size: 1.8rem;
          font-weight: 700;
          margin: 0.2rem 0 0.4rem;
        }
        .info{
          display: flex;
          align-items: center;
          justify-content: flex-start;
          color: #666666;
          font-size: 1.2rem;
          font-weight: 400;

          .up{
              width: 0.5rem;
              height: 0.7rem;
              margin: 0 0.2rem 0 0.6rem;
          }
          .sp2{
              font-size: 1.2rem;
              font-weight: 700;
              color: #121212;
          }
        }
      }
      .dv3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1.1rem 0.5rem;
        border-radius: 0.4rem;
        background: #F3F9FE;
        margin-top: 2rem;

        .menu-item{
          text-align: left;
          
          .count{
            font-size: 1.4rem;
            font-weight: 400;
            color: #666666;
            margin-bottom: 0.5rem;
          }
          .money{
            color: #121212;
            font-size: 1.8rem;
            font-weight: 700;


            .wym{
              color: #666666;
              font-size: 1.2rem;
              font-weight: 400;

            }

          }
        }
        .dashx{
          width: 0.1rem;
          height: 4rem;
          border-left: 1px dashed #2A82E4;
        }
      }
    }
    .rczyfx{
      width: 94%;
      border-radius: 5px;
      background: #FFFFFF;
      position: absolute;
      top: 17rem;
      left: 3%;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);

      .tips{
        font-size: 1.8rem;
        font-weight: 700;
        margin-bottom: 1rem;
      }
      .progress{
        
        .ps-item{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 2rem;

          .ps1{
            width: 2rem;
            height: 1.7rem;
            margin-right: 1rem;
          }
          .paim{
            font-size: 1.4rem;
            font-weight: 700;
            margin-right: 1rem;
          }
          .jdt{
            width: 90%;

            .ps-name{
              margin-bottom: 0.6rem;

            }
            .leixing{
              font-size: 1.2rem;
              font-weight: 400;
              margin-right: 2.8rem;
              color: #6D6D6D;
            }

            .lxnum{
              font-size: 1.2rem;
              font-weight: 700;
              color: #333333;
              margin-right: 0.2rem;
            }
            .lxdw{
              font-size: 0.8rem;
              font-weight: 400;
              color: #D1D1D1;

            }

          }

        }

      }
    }
    .xlfx,.zcfx,.dqyj{
      width: 94%;
      height: 29rem;
      border-radius: 5px;
      background: #FFFFFF;
      position: absolute;
      top: 50rem;
      left: 3%;
      padding: 1.1rem 1.3rem;
      box-sizing: border-box;
      box-shadow: 5px 5px 15px 5px rgba(0, 0, 0, 0.1);
    
      .tips{
        font-size: 1.8rem;
        font-weight: 700;
        // margin-bottom: 2.7rem;
      }
    }
    .zcfx{
      top: 81rem;
    }
    .dqyj{
      top: 112rem;
      height: 48rem;

      .dv3{
        display: flex;
        align-items: center;
        justify-content: space-around;
        padding: 1.1rem 0.5rem;
        border-radius: 0.4rem;
        background: #F3F9FE;
        margin-top: 2rem;

        .menu-item{
          text-align: left;
          
          .count{
            font-size: 1.4rem;
            font-weight: 400;
            color: #666666;
            margin-bottom: 0.5rem;
          }
          .money{
            color: #FC3B3E;
            font-size: 1.8rem;
            font-weight: 700;
          }
        }
        .dashx{
          width: 0.1rem;
          height: 4rem;
          border-left: 1px dashed #2A82E4;
        }
      }
      .chartsdv{
        width: 100%;
      
        .chart-shuju{
          margin: 0 auto;
          display: flex;
          justify-content: space-around;
          align-items: center;
          width: 20rem;

          .titlep1{
            font-size: 1.2rem;
            font-weight: 400;
            color: #D1D1D1;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 5rem;
            text-align: center;
          }
          .titlep{
            font-size: 1.1rem;
            font-weight: 700;
            color: #6D6D6D;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 7rem;
            text-align: center;
          }
          .titlep2{
            font-size: 1.1rem;
            font-weight: 700;
            color: #333333;
            text-align: center;
            margin-bottom: 0.8rem;
            width: 5rem;
            text-align: center;
          }
        }
      }
    }
  }
}
::v-deep .van-tabs__content{
  padding: 1.8rem 1.3rem;
  background: #E8F2FB;
}
</style>